<template>
  <div class="box">
    <div class="top">
      <h3>楼市资讯</h3>
      <p style="color: #999999" @click="goNews()">更多</p>
    </div>
    <div class="main">
      <div class="con"  v-for="(item,index) in news" :key='item.id'>
        <div class="rank">{{`TOP${index+1}`}}</div>
        <p>{{item.title}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getNews } from "../service/index";
export default {
  data() {
    return {
      news: [],
    };
  },
  
   async created(){
    
      let res = await getNews();      
    //  console.log(res.body);
    if(res.status==200){
      this.news=res.body
    }
   } ,
  methods: {
    goNews(){
      uni.navigateTo({
        url: '/pages/news/index',
      })
    }
  },
};
</script>

<style lang='scss' scoped>
* {
  width: 100%;
  height: 100%;
}
.box {
 
  .top {
    padding: 0 32rpx;
    width: 100%;
    height: 60rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3 {
      font-weight: 900;
      font-size: 44rpx;
    }
    p {
      font-size: 35rpx;
    }
  }
  .main {
    
    margin-top: 50rpx;
    
    // border: 2rpx solid #999999;
    box-shadow: 0px 0px 8rpx 4rpx #ddd;
    margin-left: 20rpx;
    .con {
      width: 100%;
      height: 70rpx;
      display: flex;
      justify-content: start;
      margin: 10rpx 20rpx;
      align-items: center;
      .rank {
        width: 100rpx;
        height: 45rpx;
        font-family: "Arial Normal", "Arial";
        font-weight: 400;
        font-style: normal;
        font-size: 35rpx;
        text-align: center;
        line-height: 45rpx;
        color: #fff;
        background:linear-gradient(90deg, #fff, pink);
      }
      p {
        margin: 0 10rpx 0 50rpx;
        font-size: 30rpx;
      }
    }
  }
}
</style>